<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="The description of this awesome landing page.">
    <title>My Awesome Landing-Page</title>
    <!-- Bootstrap Core CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link href="css/landing-page.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="loader"></div>
    <div id="content" style="display: none;">
      <!-- Navigation -->
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#home" data-i18n="menu.home">My Awesome Landing-Page</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li>
                <a class="page-scroll" href="#about" data-i18n="menu.about">About</a>
              </li>
              <li>
                <a class="page-scroll" href="#services" data-i18n="menu.services">Services</a>
              </li>
              <li>
                <a class="page-scroll" href="#contact" data-i18n="menu.contact">Contact</a>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
      </nav>
      <section id="home">
        <!-- Header -->
        <div class="intro-header">
          <div class="container">
            <div class="row">
              <div class="col-lg-12">
                <div class="intro-message">
                  <h1 data-i18n="intro.title">Landing Page</h1>
                  <h3 data-i18n="intro.subTitle">Some subtitle</h3>
                  <hr class="intro-divider">
                  <ul class="list-inline intro-social-buttons">
                    <li>
                      <a href="https://twitter.com/locize" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">twitter</span></a>
                    </li>
                    <li>
                      <a href="https://github.com/i18next/jquery-i18next" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">github</span></a>
                    </li>
                    <li>
                      <a href="https://www.youtube.com/channel/UCPYQjBbbXojUcB8qjeIB3uA" class="btn btn-default btn-lg"><i class="fa fa-youtube fa-fw"></i> <span class="network-name">YouTube</span></a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- /.container -->
        </div>
        <!-- /.intro-header -->
      </section>
      <!-- About Section -->
      <section id="about" class="container content-section text-center">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <br/><br/>
            <h2 data-i18n="about.title">About my awesome Landing-Page</h2>
            <br/>
            <p data-i18n="about.description">This is a fantastic website presenting...</p>
            <br/>
          </div>
        </div>
      </section>
      <section id="services">
        <!-- Page Content -->
        <div class="content-section-a">
          <div class="container">
            <div class="row">
              <div class="col-lg-5 col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading" data-i18n="[html]section.one.title">Feature:<br>One</h2>
                <div class="lead">
                  <p data-i18n="section.one.description">This awesome feature will...</p>
                </div>
              </div>
              <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                <img class="img-responsive" src="img/pad.png" alt="">
              </div>
            </div>
          </div>
          <!-- /.container -->
        </div>
        <!-- /.content-section-a -->
        <div class="content-section-b">
          <div class="container">
            <div class="row">
              <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading" data-i18n="[html]section.two.title">Best service<br>ever</h2>
                <div class="lead">
                  <p data-i18n="section.two.description">Turn on that setting to unleash the full power of...</p>
                </div>
              </div>
              <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                <img class="img-responsive" src="img/dog.png" alt="">
              </div>
            </div>
          </div>
          <!-- /.container -->
        </div>
        <!-- /.content-section-b -->
        <div class="content-section-a">
          <div class="container">
            <div class="row">
              <div class="col-lg-5 col-sm-6">
                <hr class="section-heading-spacer">
                <div class="clearfix"></div>
                <h2 class="section-heading" data-i18n="[html]section.three.title">Last<br>but not least</h2>
                <div class="lead">
                  <p data-i18n="section.three.description">The best customer support you can ever have.</p>
                </div>
              </div>
              <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                <img class="img-responsive" src="img/phones.png" alt="">
              </div>
            </div>
          </div>
          <!-- /.container -->
        </div>
        <!-- /.content-section-a -->
      </section>
      <section id="contact">
        <div class="banner">
          <div class="container">
            <div class="row">
              <div class="col-lg-6">
                <h2 data-i18n="contact">Keep in Touch:</h2>
              </div>
              <div class="col-lg-6">
                <ul class="list-inline banner-social-buttons">
                  <li>
                    <a href="https://twitter.com/locize" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">twitter</span></a>
                  </li>
                  <li>
                    <a href="https://github.com/i18next/jquery-i18next" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">github</span></a>
                  </li>
                  <li>
                    <a href="https://www.youtube.com/channel/UCPYQjBbbXojUcB8qjeIB3uA" class="btn btn-default btn-lg"><i class="fa fa-youtube fa-fw"></i> <span class="network-name">YouTube</span></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- /.container -->
        </div>
      </section>
      <!-- /.banner -->
      <!-- Footer -->
      <footer>
        <div class="container">
          <div class="row">
            <div class="col-md-8">
              <ul class="list-inline">
                <li>
                  <a href="#home" data-i18n="menu.homeInFooter">Home</a>
                </li>
                <li class="footer-menu-divider">&sdot;</li>
                <li>
                  <a href="#about" data-i18n="menu.about">About</a>
                </li>
                <li class="footer-menu-divider">&sdot;</li>
                <li>
                  <a href="#services" data-i18n="menu.services">Services</a>
                </li>
                <li class="footer-menu-divider">&sdot;</li>
                <li>
                  <a href="#contact" data-i18n="menu.contact">Contact</a>
                </li>
                <li class="footer-menu-divider">&sdot;</li>
                <li>
                  <select name="language" id="languageSwitcher"></select>
                </li>
                <li id="languageChangedNotification" style="display: none;">
                  <i data-i18n="footer.counter" data-i18n-options='{ "count": 0 }'></i>
                </li>
              </ul>
              <p id="footerMessage" class="text-muted small" data-i18n="footer.date"></p>
              <p class="copyright text-muted small" data-i18n="[html]footer.copyright">Copyright &copy; My Awesome Landing-Page All Rights Reserved</p>
            </div>
          </div>
        </div>
      </footer>
    </div>

    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="js/landing-page.js"></script>

    <!-- i18next stuff -->
    <script src="https://cdn.jsdelivr.net/npm/i18next@21.6.10/i18next.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-i18next@1.2.1/jquery-i18next.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/i18next-browser-languagedetector@6.1.3/i18nextBrowserLanguageDetector.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/i18next-locize-backend@4.2.8/i18nextLocizeBackend.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/locize-lastused@3.0.13/locizeLastUsed.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/locize@2.2.4/locize.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/min/moment-with-locales.min.js"></script>

    <script src="js/i18n.js"></script>
  </body>
</html>